<%@ page import="java.util.Date"%>
<%@ page import="com.pochoF1.enums.Equipos"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
<jsp:include page="head.jsp"></jsp:include>
<link rel="stylesheet" href="assets/css/compiled/index.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/css/compiled/gallery.css" type="text/css" media="screen" />
</head>
<body>
	<!-- navbar -->
	<header class="navbar navbar-inverse" role="banner">
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse" id="menu-toggler">
				<span class="sr-only">Open Menu</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="home"> <img src="assets/img/logo.png" alt="logo" />
			</a>
		</div>
	</header>
	<!-- end navbar -->
	<!-- sidebar -->
	<div id="sidebar-nav">
		<ul id="dashboard-menu">
			<li><a href="home"> <i class="icon-home"></i> <span>Home</span>
			</a></li>
			<li class="active">
				<div class="pointer">
					<div class="arrow"></div>
					<div class="arrow_border"></div>
				</div> <a href="showRaces"> <i class="icon-calendar"></i> <span>Race Details</span>
			</a>
			</li>
		</ul>
	</div>
	<!-- end sidebar -->
	<!-- main container -->
	<div class="content">
		<div id="main-stats">
			<div class="row">
				<div class="col-md-6 col-md-offset-5">
					<div class="input-group date" style="width: 200px;">
						<input type="text" class="form-control" readonly="readonly" value="${raceYear}" id="fecha" name="fecha"><span class="input-group-addon" style="cursor: pointer;"><i class="icon-th"></i>&nbsp;Choose Year</span>
					</div>
				</div>
			</div>
		</div>
		<div id="pad-wrapper" class="gallery">
			<div class="row">
				<div class="col-md-12">
					<h3>Races - Year : <span id="spanYear"></span></h3>
				</div>
			</div>
			<c:set var="cantidad" value="${fn:length(season.races)}" />
			<div class="gallery-wrapper">
				<div class="row gallery-row well well-lg" style="margin: 0 auto;">
					<form action="showRaces" method="POST" id="raceForm">
						<input type="hidden" name="raceRound" id="raceRound" />
						<input type="hidden" name="raceYear" id="raceYear" />
						<input type="hidden" name="raceName" id="raceName" />
						<input type="hidden" name="raceId" id="raceId" />
						<div class="img-container text-left" id="divRaces">
							<c:forEach var="race" items="${season.races}">
								<div class="img-box" onclick="selectRace('<fmt:formatNumber type="number" pattern="00" value="${race.round}" />','${race.circuit.country.name}','${race.id}')">
									<img src="assets/img/Races/flag-<c:out value='${fn:toLowerCase(race.circuit.country.name)}'/>.png" class="img-responsive" alt="${race.name}" title="${race.name}" />
									<p class="title">${fn:toUpperCase(race.circuit.country.name)}</p>
								</div>
							</c:forEach>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- Modal -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
            	<h3 class="modal-title">Loading</h3>
            </div>
            <div class="modal-body">
            	<div class="text-center">
					<h2>Please wait</h2>
				</div>
				<div class="text-center">
					<img alt="Loading" src="assets/img/ajax-loader.gif" width="45px" />
				</div>
            </div>
          </div>
        </div>
    </div>

	<!-- scripts -->
	<script src="assets/js/jquery-1.11.0.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/jquery-ui-1.10.2.custom.min.js"></script>
	<script src="assets/js/theme.js"></script>
	<script src="assets/datepicker/js/bootstrap-datepicker.js"></script>
	<script src="assets/js/functions.js"></script>
	<script>
		$("#spanYear").html($("#fecha").val());
		$(document).ready(function (){
			if($("#fecha").val() < new Date().getFullYear()){
				cargarCarrerasPorAnio($("#fecha").val());
			}
		});
	</script>
	<jsp:include page="analytics.jsp"></jsp:include>
</body>
</html>